<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>華信商会(株) 販売管理業務システム</title>
<meta name="renderer" content="webkit">

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet"
	href="css/datetimepicker/bootstrap-datetimepicker.min.css"
	media="screen" />
</head>

<body>
	<!-- Top Begin -->
	<%@include file="common/include.jsp"%>
	<!-- Top End -->

	<!-- Body Begin -->
	<form action="faxing.action" method="post">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="row">
							<div class="col-md-6" align="left">
								<font style="font-size: 14px; line-height: 29px;">受注情報</font>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-4">
								<div class="input-group">
									<span class="input-group-addon">顧客コード</span> <input type="text"
										id="gukecode" name="gukecode" class="form-control" autofocus="autofocus" value="${gukecode}"> <span
										class="input-group-addon"><a href="#" onclick="goPage(1,'tbody1','kokyakuPage',0)"
										data-toggle="modal" data-target="#customerModal" id="a1"><span
											class="glyphicon glyphicon-search"></span></a> </span>
								</div>
							</div>
							<div class="col-md-6">
								<div class="input-group date form_date">
									<span class="input-group-addon">納入希望日（省略時翌日）</span> <input
										type="text" class="form-control" readonly id="narudate" name="narudate" value='${stsysdate }'> <span
										class="input-group-addon"><span
										class="glyphicon glyphicon-calendar"></span></span>
								</div>
							</div>
						</div>
						<br>
						<div class="row">
							<div class="col-md-10">
								<div class="input-group">
									<span class="input-group-addon">納入先（省略時現住所）</span> <input
										type="text" class="form-control" id="naruxian" name="naruxian">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-6" align="left">
									<font style="font-size: 14px; line-height: 29px;">受注商品明細</font>
								</div>
								<div class="col-md-6" align="right">
									<button type="button" class="btn btn-primary btn-sm" onclick="goPage(1,'tbody2','shouhinpage',0)"
										data-toggle="modal" data-target="#goodsModal">追加</button>
									<button type="reset" class="btn btn-default btn-sm" id="reset">クリア</button>
									<button type="button" class="btn btn-warning btn-sm" 
										id="but4">発行</button>
								</div>
							</div>
						</div>
						<div class="panel-body">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th style="text-align: center;">項番</th>
										<th style="text-align: center;">商品コード</th>
										<th style="text-align: center;">商品名</th>
										<th style="text-align: center;">単価</th>
										<th style="text-align: center;">単位</th>
										<th style="text-align: center;">在庫数</th>
										<th style="text-align: center;">売上数量</th>
										<th style="text-align: center;"><input type="checkbox"
											onclick="checkAll(this)" id="all" /></th>
									</tr>
								</thead>
								<tbody id="tbody3">
								<% int i=0; %>
									<c:forEach var="p" items="${zhuijiasholist}">	
									<%i++; %>			
										<tr><td style="text-align: center;"><%= i %></td>
										<td style="text-align: center;">${p.shouhinCode}</td>
										<td style="text-align: left;">${p.shouhinMei }</td>
										<td style="text-align: right;">${p.struriageTanka }</td>
										<td style="text-align: center;">${p.tani }</td>
										<td style="text-align: right;">${p.zaikoSuu }</td>
										<td style="text-align: right;" >${p.uriageSuu }</td>
										<td style="text-align: center;"><input type="checkbox" name="box" onclick="selectAll()" value="${p.shouhinCode},${p.shouhinMei };${p.uriageTanka }.${p.uriageSuu }" /></td>
										</tr>		
									</c:forEach>
								</tbody>
							</table>
						</div>
				</div>
			</div>
		</div>
	</div>
	</form>
	<!-- Body End -->

	<!-- Goods Modal -->
	<div class="modal fade" id="goodsModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">商品追加</h4>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-6" align="left">
									<div class="input-group">
										<span class="input-group-addon">商品名</span> <input type="text"
											class="form-control" id="shouhinMei" name="shouhinMei">
									</div>
								</div>
								<div class="col-md-6" align="right">
									<button type="button" class="btn btn-primary btn-sm" id="but2" onclick="shouhinMeijiansuo()">検索</button>
								</div>
							</div>
						</div>
						<div class="panel-body">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th style="text-align: center;">選択</th>
										<th style="text-align: center;">商品コード</th>
										<th style="text-align: center;">商品名</th>
										<th style="text-align: center;">単価</th>
										<th style="text-align: center;">在庫数</th>
									</tr>
								</thead>
								<tbody id="tbody2">
									<c:forEach var="p" items="${shouhinlist}">				
										<tr>
										<td style="text-align: center;">
										<a onclick="shouhin(this.name)" name="${p.shouhinCode }"><span class="glyphicon glyphicon-check"></span></a>
										</td><td style="text-align: center;" id="${p.shouhinCode }">${p.shouhinCode }</td>
										<td style="text-align: left;">${p.shouhinMei }</td>
										<td style="text-align: right;">${p.struriageTanka }</td>
										<td style="text-align: right;">${p.strzaikoSuu }</td>
										</tr>		
									</c:forEach>
								</tbody>
							</table>
							<nav class="page" id="shouhinpage">
								
							</nav>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="row">
						<div class="col-md-4" align="left">
							<div class="input-group">
								<span class="input-group-addon">商品コード</span> <input type="text"
									class="form-control" readonly id="shouhinCode">
							</div>
						</div>
						<div class="col-md-4" align="left">
							<div class="input-group">
								<span class="input-group-addon">売上数量</span> <input type="text"
									class="form-control" id="uriageSuu">
							</div>
						</div>
						<div class="col-md-4" align="right">
							<button type="button" class="btn btn-primary btn-sm"
								data-dismiss="modal" id="but3">確認</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Customer Modal -->
	<div class="modal fade" id="customerModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">顧客情報</h4>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-6" align="left">
									<div class="input-group">
										<span class="input-group-addon">顧客名</span> <input type="text"
											class="form-control" id="kokyakuMei" name="kokyakuMei">
									</div>
								</div>
								<div class="col-md-6" align="right">
									<button type="button"  class="btn btn-primary btn-sm" id="but1" onclick="kokyakuMeijiansuo()">検索</button>
								</div>
							</div>
						</div>
						<div class="panel-body">
							<table class="table table-bordered" id="customerTable">
								<thead>
									<tr>
										<th style="text-align: center;">選択</th>
										<th style="text-align: center;">顧客コード</th>
										<th style="text-align: center;">顧客名</th>
										<th style="text-align: center;">信用限度額</th>
									</tr>
								</thead>
								<tbody id="tbody1">
									<c:forEach var="p" items="${kokyakulist}">				
										<tr>
										<td style="text-align: center;">
										<a onclick="gukec(this.name)" name="${p.kokyakuCode }" data-dismiss="modal"><span class="glyphicon glyphicon-check"></span></a></td>
										<td style="text-align: center;" id="${p.kokyakuCode }"> ${p.kokyakuCode } </td>
										<td style="text-align: left;">${p.kokyakuMei }</td>
										<td style="text-align: right;">${p.strshinyouGendoGaku }</td>
										</tr>			
									</c:forEach>
								</tbody>
							</table>
							<nav class="page" id="kokyakuPage">
						</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Foot begin -->
	<div class="text-center text-muted"
		style="height: 40px; width: 100%; bottom: 0; position: fixed; line-height: 40px; background-color: #eee">
		<i class="glyphicon glyphicon-copyright-mark"></i>DHEE 2019
		大連華信計算機新技術培訓中心. すべての知る権利を保留
	</div>
	<!-- Foot End -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="js/datetimepicker/bootstrap-datetimepicker.min.js"
		charset="UTF-8"></script>
	<script type="text/javascript"
		src="js/datetimepicker/locales/bootstrap-datetimepicker.ja.js"
		charset="UTF-8"></script>
	<script type="text/javascript">
		${msg}
		var r=false;
		${str}
		if(r){
			document.forms[0].action="zhangpiao.action";
			document.forms[0].submit();
		}
		
		function kokyakuMeijiansuo(){
				 $.ajax({
					type : "post",
					url : "selkokyakuList.action",
					async : true,
					data : "kokyakuMei=" + $("#kokyakuMei").val(),
						success : function(data) {
						$("#tbody1").empty();
						$.each(data.kokyakulist, function(key, val) {	
							$("#tbody1").append('<tr><td style="text-align: center;"><a onclick="gukec(this.name)" name="'
							+val.kokyakuCode+'" data-dismiss="modal"><span class="glyphicon glyphicon-check"></span></a></td><td style="text-align: center;" id="'
							+val.kokyakuCode+'">'
							+val.kokyakuCode+'</td><td style="text-align: left;">'+val.kokyakuMei+'</td><td style="text-align: right;">'
							+val.strshinyouGendoGaku+'</td></tr>');
										
						});	
					 goPage(1, "tbody1","kokyakuPage",0);

					}
				});
		}
		
		$(function() {
			$("#reset").click(
					function() {
						document.forms[0].action="toPR10101.action";
						document.forms[0].submit();
					})
		})
		
		
		function shouhinMeijiansuo(){
				 $.ajax({
					type : "post",
					url : "selshouhinList.action",
					async : true,
					data : "shouhinMei=" + $("#shouhinMei").val(),
					success : function(data) {
					$("#tbody2").empty();
							$.each(data.shouhinlist, function(key, val) {	
							$("#tbody2").append('<tr><td style="text-align: center;"><a onclick="shouhin(this.name)" name="'
								+val.shouhinCode+'"><span class="glyphicon glyphicon-check"></span></a></td><td style="text-align: center;" id="'
								+val.shouhinCode+'">'
								+val.shouhinCode+'</td><td style="text-align: left;">'
								+val.shouhinMei+'</td><td style="text-align: right;">'
								+val.struriageTanka+'</td><td style="text-align: right;">'
								+val.strzaikoSuu+'</td></tr>');
							});	
					goPage(1, "tbody2","shouhinpage",0);
						}
					}); 
				}
	
		$(function() {
			$("#but3").click(
					function() {
						var tbody =document.getElementById("tbody3");
						var rows = tbody.rows;
						var xiangfan = rows.length+1;
						var reg = new RegExp("^[0-9]*$");
						
						 if ($("#uriageSuu").val() == "") {
							$("#uriageSuu").focus();
							alert("売上数量を入力してください");
							return true;
						} else if (!reg.test($("#uriageSuu").val())) {
							$("#uriageSuu").focus();
							$("#uriageSuu").val("");
							alert("売上数量欄に半角数字を入力してください");
							return true;
						} else if ($("#uriageSuu").val()>9999 ||$("#uriageSuu").val()<1 ) {
							$("#uriageSuu").focus();
							$("#uriageSuu").val("");
							alert("売上数量 値を取る範囲は1から9999まで");
							return true;
						} else if (rows.length>=12 ) {
							alert("受注商品明細に最多12行レコードのみが追加できる。");
							return true;
						} 
						for (var i=0;i<rows.length;i++) {
							var cells =rows[i].cells;
							if($("#shouhinCode").val()==cells[1].innerHTML){
								alert("商品コードは同じではいけません。");
								return true;
							}
						}
						
					   $.ajax({
							type : "post",
							url : "selShouhin.action",
							async : true,
							data : {"shouhinCode":$("#shouhinCode").val(),"uriageSuu":$("#uriageSuu").val(), } ,
							success : function(data) {
								var zaikoSuu =data.result;
								if("zaikoSuu"==zaikoSuu){
									$("#uriageSuu").val("");
									alert("商品は在庫量不足です。");
									
								}else{
									$("#shouhinCode").val("");
									$("#uriageSuu").val("");
									$("#shouhinMei").val("");
									shouhinMeijiansuo();
								}
										$("#tbody3").append('<tr><td style="text-align: center;">'
										+xiangfan+'</td><td style="text-align: center;">'
										+data.m002.shouhinCode+'</td><td style="text-align: left;">'
										+data.m002.shouhinMei+'</td><td style="text-align: right;">'
										+data.m002.struriageTanka+'</td><td style="text-align: center;">'
										+data.m002.tani+'</td><td style="text-align: right;">'
										+data.m002.strzaikoSuu+'</td><td style="text-align: right;" >'
										+data.uriageSuu+'</td><td style="text-align: center;"><input type="checkbox" name="box" onclick="selectAll()" value="'
										+data.m002.shouhinCode+','+data.m002.shouhinMei+';'+data.m002.uriageTanka+'.'+data.uriageSuu+'" /></td></tr>');									
										


							}
						});
					})
		})
		$(function() {
			$("#but4").click(
					function() {
						var r = /^\d{5}$/;
						var tbody =document.getElementById("tbody3");
						var rows = tbody.rows;
						var xiangfan = rows.length+1;
						var reg = new RegExp("^[0-9]*$");
						if ($("#gukecode").val() == "") {
							$("#gukecode").focus();
							$("#gukecode").val("");
							alert("顧客コードを入力してください");
							return true;
						}else if (!reg.test($("#gukecode").val())) {
							$("#gukecode").focus();
							$("#gukecode").val("");
							alert("顧客コードに半角数字を入力してください");
							return true;
						} else if (!r.test($("#gukecode").val())) {
							$("#gukecode").focus();
							$("#gukecode").val("");
							alert("顧客コード欄に5桁を入力してください");
						} else  {
							$("form").submit();	
							
						}
					})
		})
	
		$(".form_date").datetimepicker({
			language : 'ja',
			autoclose : true,
			todayHighlight : true,
			todayBtn : true,
			minView : "month",
			format : "yyyy-mm-dd",
			pickerPosition : "bottom-left"
		});

		function checkAll(obj) {
			//获取name=box的复选框
			var box = document.getElementsByName("box");
			for (var i = 0; i < box.length; i++) {
				box[i].checked = obj.checked;
			}
		}

		function selectAll() {
			//获取name=box的复选框
			var box = document.getElementsByName("box");
			var count = 0;
			for (var i = 0; i < box.length; i++) {
				if (box[i].checked) {
					count++;
				}
			}
			if (count == box.length) {
				document.getElementById("all").checked = true;
			} else {
				document.getElementById("all").checked = false;
			}
		}

		function gukec(result) {
			$("#gukecode").val(result);
			$("#kokyakuMei").val("");
			kokyakuMeijiansuo();
		}
		
		function shouhin(result) {
			$("#shouhinCode").val($(document.getElementById(result)).text());
		}
		
		function goPage(pno, table_id, page_id, nextpage) {
			var tbody = document.getElementById(table_id);
			var num = tbody.rows.length;
			var allPage = 0;
			var pageSize = 5; 

			if(num / pageSize > parseInt(num / pageSize)) {
				//				if(num / pageSize > parseInt(num / pageSize)) {
				allPage = parseInt(num / pageSize) + 1;
			} else {
				allPage = parseInt(num / pageSize);
			}
			var nowPage = pno;
			var startRow = (nowPage - 1) * pageSize + 1;
			var endRow = nowPage * pageSize;
			endRow = (endRow > num) ? num : endRow;
			for(var i = 1; i < (num + 1); i++) {
				var oneRow = tbody.rows[i - 1];
				if(i >= startRow && i <= endRow) {
					oneRow.style.display = "";
				} else {
					oneRow.style.display = "none";
				}
			}
			var Str = "";
			Str += "<ul class='pagination'>";
			Str += "<li >";

			if(allPage <= 5) {
				Str += "<li class='disabled'>";
				Str += "<a aria-label='Previous'><span aria-hidden='true'>«</span></a>";
				Str += "</li>";
				for(var j = 0; j < allPage; j++) {
					if(j == (nowPage - 1)) {
						Str += "<li class='active'>";
					} else {
						Str += "<li>";
					}
					Str += "<a onclick=goPage(" + (j + 1) + ",'" + table_id + "','" + page_id + "')>" + (j + 1) + "</a>";
					Str += "</li>";
				}
				Str += "<li>";
				Str += "<li class='disabled'>";
				Str += "<a aria-label='Next'><span aria-hidden='true'>»</span></a>";
				Str += "</li>";
				Str += "</ul>";
			} else {
				if(nextpage >= 1) {
					Str += "<a onclick=goPage(" + pno + ",'" + table_id + "','" + page_id + "'," + (nextpage - 1) + ") aria-label='Previous'><span aria-hidden='true'>«</span></a>";
				} else {
					Str += "<li class='disabled'>";
					Str += "<a  aria-label='Previous'><span aria-hidden='true'>«</span></a>";

				}
				Str += "</li>";

				var j = nextpage + 0;
				for(; j < (nextpage + 5); j++) {
					if(j == (nowPage - 1)) {
						Str += "<li class='active'>";
					} else {
						Str += "<li>";
					}
					Str += "<a onclick=goPage(" + (j + 1) + ",'" + table_id + "','" + page_id + "'," + nextpage + ")>" + (j + 1) + "</a>";
					Str += "</li>";
				}
				Str += "<li>";
				if(nextpage+5 < allPage) {
					Str += "<a onclick=goPage(" + pno + ",'" + table_id + "','" + page_id + "'," + (nextpage + 1) + ") aria-label='Next'><span aria-hidden='true'>»</span></a>";
					Str += "</li>";
					Str += "</ul>";
				} else {
					Str += "<li class='disabled'>";
					Str += "<a><span aria-hidden='true'>»</span></a>";
					Str += "</li>";
					Str += "</ul>";
				}

			}
			document.getElementById(page_id).innerHTML = Str;

		}

	</script>
</body>

</html>